{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static 'system.css' %}" />
    <link rel="stylesheet" href="{% static 'common.css' %}" />
    {% block css %}{% endblock css %}
</head>

<body>
    <div class="sidebar">
        <ul>
            <li id="logo" style="--bg: #333">
                <a>
                    <span class="menuToggle"></span>
                    <span class="text">云网盘</span>
                </a>
            </li>
            <div class="MenuList">
                <li style="--bg: #ffa117">
                    <a href="{% url 'home' %}">
                        <span class="icon">
                            <ion-icon name="person-outline"></ion-icon>
                        </span>
                        <span class="text">私人空间</span>
                    </a>
                </li>
                <li style="--bg: #0fc70f">
                    <a href="{% url 'shared' %}">
                        <span class="icon">
                            <ion-icon name="planet-outline"></ion-icon>
                        </span>
                        <span class="text">共享空间</span>
                    </a>
                </li>
                <li style="--bg: #0fc70f">
                    <a href="{% url 'user' %}">
                        <span class="icon">
                            <ion-icon name="finger-print-outline"></ion-icon>
                        </span>
                        <span class="text">个人信息</span>
                    </a>
                </li>
            </div>
            <div class="bottom">
                <li>
                    <a id="userDigest" href="{% url 'user' %}">
                        <span class="icon">
                            <span class="imgBox">
                                <img src="{% static 'header.webp' %}" alt="..." />
                            </span>
                        </span>
                        <span class="text">小张</span>
                    </a>
                </li>
                <li onclick="logout()">
                    <a href="#">
                        <span class="icon">
                            <ion-icon name="log-out-outline"></ion-icon>
                        </span>
                        <span class="text"> 登出 </span>
                    </a>
                </li>
            </div>
        </ul>
    </div>
    <div class="main">{% block content %}{% endblock content %}</div>
</body>
<script>
    const menuToggle = document.querySelector('.menuToggle')
    const sidebar = document.querySelector('.sidebar')
    const main = document.querySelector('.main')
    menuToggle.onclick = function () {
        menuToggle.classList.toggle('active')
        sidebar.classList.toggle('active')
        main.classList.toggle('active')
    }
    const MenuList = document.querySelectorAll('.MenuList li')
    const locate = window.location.href
    MenuList.forEach((item) => {
        const href = item.querySelector('a').href
        if (locate.startsWith(href)) {
            item.classList.toggle('active')
        }
    })
</script>
<script src="{% static 'plugins/jquery-3.7.0/jquery-3.7.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
{% block script %}
{% endblock script %}
<script>
    $.ajax({
        url: "{% url 'userGet' %}",
        type: 'GET',
        success: (res) => {
            if (res.status) {
                document.querySelector('#userDigest .text').innerHTML = res.userInfo['username']
            } else {
                location.href = '/account'
            }
        }
    })
</script>
<script>
    function logout () {
        // dosth
        if (confirm('确认登出？')) {
            $.ajax({
                url: "{% url 'logout' %}",
                type: 'GET',
                success: (res) => {
                    if (res.status) {
                        alert("登出成功")
                        window.location.href = '/account'
                    } else {
                        alert("登出失败，请重试")
                    }
                }
            })
        }
    }
</script>

</html>